<template>
  <div>
    <px-row>
      <px-col :span="24" class="water_col">
        <div class="waterdom borderRidus boxShadow">
          <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
            <!-- <px-form-item label="验证计划">
              <px-select v-model="queryParams.systemCode" placeholder="请选择" style="width: 240px" clearable filterable>
                <px-option v-for="dict in liquidList" :key="dict.itemValue" :label="dict.itemName" :value="dict.itemValue" />
              </px-select>
            </px-form-item> -->
            <px-form-item label="时间" style="width: 440px !important">
              <px-date-picker
                v-model="dateRange"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="请选择"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :default-time="defaultTime"
              />
            </px-form-item>
            <px-button style="margin-top: -17px" type="primary" @click="handleQuery()">查询</px-button>
            <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button>
          </px-form>
          <div>
            <px-row>
              <px-col :span="11">
                <div class="miantop">
                  <span class="miantoptitle">验证线</span>
                  <px-tabs v-model="activeWater" class="toptabs" @tab-click="getLineList">
                    <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="item.name">
                      <template #label>
                        <p class="pane-bottom">{{ item.label }}</p>
                        <p class="pane-line" />
                      </template>
                    </px-tab-pane>
                  </px-tabs>
                </div>
                <px-scrollbar class="mianscrollbar" height="200px">
                  <px-checkbox-group v-model="checkList1">
                    <span
                      v-for="(item, index) in spcJobList
                        .filter(item => item.groupName == '验证线')[0]
                        ?.configs.filter(item => item.subGroup == activeWater)[0]?.items"
                      :key="index"
                      style="display: inline-block; width: calc(25% - 10px); margin-right: 10px"
                    >
                      <px-checkbox :label="item.spcJob" @change="setcheckList1(item.spcJob, item)">{{ item.name }}</px-checkbox>
                    </span>
                  </px-checkbox-group>
                </px-scrollbar>
              </px-col>
              <px-col :span="2">
                <div class="maincenter">
                  <px-button
                    v-if="!pkflg"
                    class="btnpos"
                    type="primary"
                    plain
                    :disabled="!(checkList1.length > 0 && checkList1.length > 0)"
                    @click="setpkflg('pk')"
                    >合并</px-button
                  >
                  <px-button v-else class="btnpos" type="primary" @click="setpkflg('close')">拆分</px-button>
                </div>
              </px-col>
              <px-col :span="11">
                <div class="miantop">
                  <span class="miantoptitle bg2">生产线</span>
                  <px-tabs v-model="activeWater" class="toptabs" @tab-click="getLineList2">
                    <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="item.name">
                      <template #label>
                        <p class="pane-bottom">{{ item.label }}</p>
                        <p class="pane-line" />
                      </template>
                    </px-tab-pane>
                  </px-tabs>
                </div>
                <px-scrollbar class="mianscrollbar" height="200px">
                  <px-checkbox-group v-model="checkList2">
                    <span
                      v-for="(item, index) in spcJobList
                        .filter(item => item.groupName == '生产线')[0]
                        ?.configs.filter(item => item.subGroup == activeWater)[0]?.items"
                      :key="index"
                      style="display: inline-block; width: calc(25% - 10px); margin-right: 10px"
                    >
                      <px-checkbox :label="item.spcJob" @change="setcheckList2(item.spcJob, item)">{{ item.name }}</px-checkbox>
                    </span>
                  </px-checkbox-group>
                </px-scrollbar>
              </px-col>
            </px-row>
          </div>
        </div>
      </px-col>
    </px-row>
    <px-row v-if="!pkflg" gutter="16" style="margin-top: 16px">
      <px-col :span="12" class="water_col">
        <div class="waterdom borderRidus boxShadow" style="position: relative">
          <div v-if="checkList1.length > 0">
            <div class="detailmain2">
              <px-tabs v-model="activeName" disabled class="equipment-tabs">
                <px-tab-pane name="all">
                  <template #label>
                    <p class="pane-bottom">ALARM({{ spctotal1.totalCount }})</p>
                    <p class="pane-line" />
                  </template>
                </px-tab-pane>

                <px-tab-pane name="ooc">
                  <template #label>
                    <p class="pane-bottom">OOC({{ spctotal1.totalOocCount }})</p>
                    <p class="pane-line" />
                  </template>
                </px-tab-pane>
                <px-tab-pane name="oow">
                  <template #label>
                    <p class="pane-bottom">OOW({{ spctotal1.totalOowCount }})</p>
                    <p class="pane-line" />
                  </template>
                </px-tab-pane>
                <px-tab-pane name="oos">
                  <template #label>
                    <p class="pane-bottom">OOS({{ spctotal1.totalOosCount }})</p>
                    <p class="pane-line" />
                  </template>
                </px-tab-pane>
              </px-tabs>
            </div>

            <div class="chartsdom">
              <chartoption :SpcAnalysis="spcChartsList1" :tabvalue="checkList1[0]" :width="'100%'" :height="'400px'" />
            </div>
            <px-table :data="spcChartsList1" border style="width: 100%">
              <px-table-column type="index" label="序号" fixed width="55" align="center" />
              <px-table-column label="指标名称">
                <template #default="scope">
                  <span>{{ scope.row.indicatorName }}</span>
                </template>
              </px-table-column>
              <px-table-column label="最大值">
                <template #default="scope">
                  <span>{{ scope.row.maxValue }}</span>
                </template>
              </px-table-column>
              <px-table-column label="最小值">
                <template #default="scope">
                  <span>{{ scope.row.minValue }}</span>
                </template>
              </px-table-column>
              <px-table-column label="平均值">
                <template #default="scope">
                  <span>{{ scope.row.avgValue }}</span>
                </template>
              </px-table-column>
            </px-table>
          </div>
          <px-empty v-else class="chartsdom" :image-size="200" />
          <div class="detailmain2 markdom" />
        </div>
      </px-col>
      <px-col :span="12" class="water_col">
        <div class="waterdom borderRidus boxShadow" style="position: relative">
          <div v-if="checkList2.length > 0">
            <div class="detailmain2">
              <px-tabs v-model="activeName" disabled class="equipment-tabs">
                <px-tab-pane name="all">
                  <template #label>
                    <p class="pane-bottom">ALARM({{ spctotal2.totalCount }})</p>
                    <p class="pane-line" />
                  </template>
                </px-tab-pane>

                <px-tab-pane name="ooc">
                  <template #label>
                    <p class="pane-bottom">OOC({{ spctotal2.totalOocCount }})</p>
                    <p class="pane-line" />
                  </template>
                </px-tab-pane>
                <px-tab-pane name="oow">
                  <template #label>
                    <p class="pane-bottom">OOW({{ spctotal2.totalOowCount }})</p>
                    <p class="pane-line" />
                  </template>
                </px-tab-pane>
                <px-tab-pane name="oos">
                  <template #label>
                    <p class="pane-bottom">OOS({{ spctotal2.totalOosCount }})</p>
                    <p class="pane-line" />
                  </template>
                </px-tab-pane>
              </px-tabs>
            </div>

            <div class="chartsdom">
              <chartoption :SpcAnalysis="spcChartsList2" :tabvalue="checkList2[0]" :width="'100%'" :height="'400px'" />
            </div>
            <px-table :data="spcChartsList2" border style="width: 100%">
              <px-table-column type="index" label="序号" fixed width="55" align="center" />
              <px-table-column label="指标名称">
                <template #default="scope">
                  <span>{{ scope.row.indicatorName }}</span>
                </template>
              </px-table-column>
              <px-table-column label="最大值">
                <template #default="scope">
                  <span>{{ scope.row.maxValue }}</span>
                </template>
              </px-table-column>
              <px-table-column label="最小值">
                <template #default="scope">
                  <span>{{ scope.row.minValue }}</span>
                </template>
              </px-table-column>
              <px-table-column label="平均值">
                <template #default="scope">
                  <span>{{ scope.row.avgValue }}</span>
                </template>
              </px-table-column>
            </px-table>
          </div>
          <px-empty v-else class="chartsdom" :image-size="200" />
          <div class="detailmain2 markdom" />
        </div>
      </px-col>
    </px-row>
    <px-row v-else style="margin-top: 16px">
      <px-col :span="24" class="water_col">
        <div class="waterdom borderRidus boxShadow" style="position: relative">
          <div v-if="checkList1.length > 0 || checkList2.length > 0">
            <div class="detailmain2">
              <px-tabs v-model="activeName" disabled class="equipment-tabs">
                <px-tab-pane name="all">
                  <template #label>
                    <p class="pane-bottom">ALARM({{ spctotal3.totalCount }})</p>
                    <p class="pane-line" />
                  </template>
                </px-tab-pane>

                <px-tab-pane name="ooc">
                  <template #label>
                    <p class="pane-bottom">OOC({{ spctotal3.totalOocCount }})</p>
                    <p class="pane-line" />
                  </template>
                </px-tab-pane>
                <px-tab-pane name="oow">
                  <template #label>
                    <p class="pane-bottom">OOW({{ spctotal3.totalOowCount }})</p>
                    <p class="pane-line" />
                  </template>
                </px-tab-pane>
                <px-tab-pane name="oos">
                  <template #label>
                    <p class="pane-bottom">OOS({{ spctotal3.totalOosCount }})</p>
                    <p class="pane-line" />
                  </template>
                </px-tab-pane>
              </px-tabs>
            </div>
            <!-- <px-select
              v-model="selectedList"
              multiple
              placeholder="相关指标"
              style="position: absolute; top: 16px; right: 0; width: 480px; margin-right: 24px"
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="2"
              filterable
              clearable
              @change="spcchange"
            >
              <px-option v-for="(item, index) in spcList" :key="index" :label="item.indicatorName" :value="item.jobId" />
            </px-select> -->
            <px-tree-select
              v-model="selectedList"
              multiple
              clearable
              collapse-tags
              collapse-tags-tooltip
              filterable
              style="float: right; width: 480px; margin-top: 0; margin-right: 0; margin-bottom: 10px"
              placeholder="请选择相关指标"
              :props="defaultProps"
              :data="spcList"
              @change="spcchange"
            />
            <div class="chartsdom">
              <chartoption :SpcAnalysis="spcChartsList" :tabvalue="[...checkList1, ...checkList2][0]" :width="'100%'" :height="'400px'" />
            </div>
            <px-table :data="spcChartsList" border style="width: 100%">
              <px-table-column type="index" label="序号" fixed width="55" align="center" />
              <px-table-column label="指标名称">
                <template #default="scope">
                  <span>{{ scope.row.indicatorName }}</span>
                </template>
              </px-table-column>
              <px-table-column label="最大值">
                <template #default="scope">
                  <span>{{ scope.row.maxValue }}{{ scope.row.pointUnit }}</span>
                </template>
              </px-table-column>
              <px-table-column label="最小值">
                <template #default="scope">
                  <span>{{ scope.row.minValue }}{{ scope.row.pointUnit }}</span>
                </template>
              </px-table-column>
              <px-table-column label="平均值">
                <template #default="scope">
                  <span>{{ scope.row.avgValue }}{{ scope.row.pointUnit }}</span>
                </template>
              </px-table-column>
            </px-table>
          </div>
          <px-empty v-else class="chartsdom" :image-size="200" />
        </div>
      </px-col>
    </px-row>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref, toRefs, reactive, onMounted, watch } from "vue";
import { verificationPlanqueryRunData } from "@/api/verifymanage";
import { spcquerySpcAnalysis, spcIndicatorquerySpcAnalysisResultList, spcqueryList, spcIndicatorquerySpcIndicatorTree } from "@/api/spc";
import chartoption from "../../spc/components/chartoption.vue";
import Items from "@/views/erc/epm/items.vue";
const data = reactive({
  dateRange: [],
  queryParams: {
    systemCode: "",
    chemical: [],
    startTime: "",
    endTime: ""
  },
  spcJobList: [],
  checkList1: [],
  checkList2: [],
  spcChartsList: [],
  spcChartsList1: [],
  spcChartsList2: [],
  spctotal1: {
    totalCount: 0,
    totalOocCount: 0,
    totalOosCount: 0,
    totalOowCount: 0
  },
  spctotal2: {
    totalCount: 0,
    totalOocCount: 0,
    totalOosCount: 0,
    totalOowCount: 0
  },
  spctotal3: {
    totalCount: 0,
    totalOocCount: 0,
    totalOosCount: 0,
    totalOowCount: 0
  },
  pkflg: true,
  selectedList: [],
  spcList: []
});

const {
  spcList,
  selectedList,
  pkflg,
  spctotal1,
  spctotal2,
  spctotal3,
  dateRange,
  queryParams,
  spcJobList,
  checkList1,
  checkList2,
  spcChartsList,
  spcChartsList1,
  spcChartsList2
} = toRefs(data);
const activeName = ref("");
const setpkflg = type => {
  pkflg.value = !pkflg.value;
  if (type == "pk") {
    setcheckList3();
  } else {
    setcheckList11();
    setcheckList22();
  }
};
const spcchange = val => {
  console.log(val);
  setcheckList3();
};
const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 1), new Date(2000, 1, 1, 23, 59, 59)];

const setcheckList3 = () => {
  if (checkList2.value.length > 0 || checkList1.value.length > 0) {
    spcquerySpcAnalysis({
      jobIdList: [...checkList1.value, ...checkList2.value, ...selectedList.value],
      timePeriod: "minutes",
      startTime: dateRange.value[0],
      endTime: dateRange.value[1]
    }).then((response: any) => {
      // console.log(response);
      spcChartsList.value = response;
      console.log(spcChartsList.value);
    });
    spcIndicatorquerySpcAnalysisResultList({
      pageNum: 1,
      pageSize: 20,
      jobIdList: [...checkList1.value, ...checkList2.value],
      alarmType: "",
      startTime: dateRange.value[0],
      endTime: dateRange.value[1]
    }).then(res => {
      if (res != null) {
        spctotal3.value.totalCount = res.totalCount;
        spctotal3.value.totalOocCount = res.totalOocCount;
        spctotal3.value.totalOosCount = res.totalOosCount;
        spctotal3.value.totalOowCount = res.totalOowCount;
      } else {
        spctotal3.value.totalCount = 0;
        spctotal3.value.totalOocCount = 0;
        spctotal3.value.totalOosCount = 0;
        spctotal3.value.totalOowCount = 0;
      }
    });
  }
};
const setcheckList2 = (itemspcJob, item) => {
  const checked = checkList2.value.includes(itemspcJob);
  if (checked) {
    let filterArr2 = spcAllList1.value.filter(obj => obj.name == item.name);
    if (filterArr2.length > 0) {
      checkList1.value.push(filterArr2[0].spcJob);
      setcheckList11();
    }
  } else {
    let filterArr2 = spcAllList1.value.filter(obj => obj.name == item.name);
    console.log(filterArr2);
    if (filterArr2.length > 0) {
      checkList1.value.forEach((item, index) => {
        if (item === filterArr2[0].spcJob) {
          checkList1.value.splice(index, 1);
        }
      });
      setcheckList11();
    }
  }
  if (!pkflg.value) {
    if (checkList2.value.length > 0) {
      spcquerySpcAnalysis({
        jobIdList: [...checkList2.value],
        timePeriod: "minutes",
        startTime: dateRange.value[0],
        endTime: dateRange.value[1]
      }).then((response: any) => {
        console.log(response);
        spcChartsList2.value = response;
      });
      spcIndicatorquerySpcAnalysisResultList({
        pageNum: 1,
        pageSize: 20,
        jobIdList: [...checkList2.value],
        alarmType: "",
        startTime: dateRange.value[0],
        endTime: dateRange.value[1]
      }).then(res => {
        if (res != null) {
          spctotal2.value.totalCount = res.totalCount;
          spctotal2.value.totalOocCount = res.totalOocCount;
          spctotal2.value.totalOosCount = res.totalOosCount;
          spctotal2.value.totalOowCount = res.totalOowCount;
        } else {
          spctotal2.value.totalCount = 0;
          spctotal2.value.totalOocCount = 0;
          spctotal2.value.totalOosCount = 0;
          spctotal2.value.totalOowCount = 0;
        }
      });
    }
  } else {
    setcheckList3();
  }
};
const setcheckList22 = () => {
  if (!pkflg.value) {
    if (checkList2.value.length > 0) {
      spcquerySpcAnalysis({
        jobIdList: [...checkList2.value],
        timePeriod: "minutes",
        startTime: dateRange.value[0],
        endTime: dateRange.value[1]
      }).then((response: any) => {
        console.log(response);
        spcChartsList2.value = response;
      });
      spcIndicatorquerySpcAnalysisResultList({
        pageNum: 1,
        pageSize: 20,
        jobIdList: [...checkList2.value],
        alarmType: "",
        startTime: dateRange.value[0],
        endTime: dateRange.value[1]
      }).then(res => {
        if (res != null) {
          spctotal2.value.totalCount = res.totalCount;
          spctotal2.value.totalOocCount = res.totalOocCount;
          spctotal2.value.totalOosCount = res.totalOosCount;
          spctotal2.value.totalOowCount = res.totalOowCount;
        } else {
          spctotal2.value.totalCount = 0;
          spctotal2.value.totalOocCount = 0;
          spctotal2.value.totalOosCount = 0;
          spctotal2.value.totalOowCount = 0;
        }
      });
    }
  } else {
    setcheckList3();
  }
};
const setcheckList1 = (itemspcJob, item) => {
  const checked = checkList1.value.includes(itemspcJob);
  if (checked) {
    let filterArr2 = spcAllList2.value.filter(obj => obj.name == item.name);
    if (filterArr2.length > 0) {
      checkList2.value.push(filterArr2[0].spcJob);
      setcheckList22();
    }
  } else {
    let filterArr2 = spcAllList2.value.filter(obj => obj.name == item.name);
    console.log(filterArr2);
    if (filterArr2.length > 0) {
      checkList2.value.forEach((item, index) => {
        if (item === filterArr2[0].spcJob) {
          checkList2.value.splice(index, 1);
        }
      });
      setcheckList22();
    }
  }
  if (!pkflg.value) {
    if (checkList1.value.length > 0) {
      spcquerySpcAnalysis({
        jobIdList: [...checkList1.value],
        timePeriod: "minutes",
        startTime: dateRange.value[0],
        endTime: dateRange.value[1]
      }).then((response: any) => {
        console.log(response);
        spcChartsList1.value = response;
      });
      spcIndicatorquerySpcAnalysisResultList({
        pageNum: 1,
        pageSize: 20,
        jobIdList: [...checkList1.value],
        alarmType: "",
        startTime: dateRange.value[0],
        endTime: dateRange.value[1]
      }).then(res => {
        if (res != null) {
          spctotal1.value.totalCount = res.totalCount;
          spctotal1.value.totalOocCount = res.totalOocCount;
          spctotal1.value.totalOosCount = res.totalOosCount;
          spctotal1.value.totalOowCount = res.totalOowCount;
        } else {
          spctotal1.value.totalCount = 0;
          spctotal1.value.totalOocCount = 0;
          spctotal1.value.totalOosCount = 0;
          spctotal1.value.totalOowCount = 0;
        }
      });
    }
  } else {
    setcheckList3();
  }
};
const setcheckList11 = () => {
  if (!pkflg.value) {
    if (checkList1.value.length > 0) {
      spcquerySpcAnalysis({
        jobIdList: [...checkList1.value],
        timePeriod: "minutes",
        startTime: dateRange.value[0],
        endTime: dateRange.value[1]
      }).then((response: any) => {
        console.log(response);
        spcChartsList1.value = response;
      });
      spcIndicatorquerySpcAnalysisResultList({
        pageNum: 1,
        pageSize: 20,
        jobIdList: [...checkList1.value],
        alarmType: "",
        startTime: dateRange.value[0],
        endTime: dateRange.value[1]
      }).then(res => {
        if (res != null) {
          spctotal1.value.totalCount = res.totalCount;
          spctotal1.value.totalOocCount = res.totalOocCount;
          spctotal1.value.totalOosCount = res.totalOosCount;
          spctotal1.value.totalOowCount = res.totalOowCount;
        } else {
          spctotal1.value.totalCount = 0;
          spctotal1.value.totalOocCount = 0;
          spctotal1.value.totalOosCount = 0;
          spctotal1.value.totalOowCount = 0;
        }
      });
    }
  } else {
    setcheckList3();
  }
};
const getLineList = val => {
  console.log(val);
};
const getLineList2 = val => {
  console.log(val);
};
function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}
const spcAllList1 = ref([]);
const spcAllList2 = ref([]);
onMounted(() => {
  verificationPlanqueryRunData({}).then(res => {
    spcJobList.value = res;
    console.log(spcJobList.value);
    spcAllList2.value = [...spcJobList.value[0].configs[0].items, ...spcJobList.value[0].configs[1].items, ...spcJobList.value[0].configs[2].items];
    spcAllList1.value = [...spcJobList.value[1].configs[0].items, ...spcJobList.value[1].configs[1].items, ...spcJobList.value[1].configs[2].items];
    checkList1.value.push(spcJobList.value[1].configs[0].items[0].spcJob);
    setcheckList1(spcJobList.value[1].configs[0].items[0].spcJob, spcJobList.value[1].configs[0].items[0]);
  });
  const end = new Date();
  end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  const start = new Date();
  start.setHours(0, 0, 0, 0);
  start.setTime(start.getTime());
  dateRange.value = [formatDate(start), formatDate(end)];
  getspc();
});
const getspc = () => {
  const end = new Date();
  end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  const start = new Date();
  // start.setHours(0, 0, 0, 0);
  start.setTime(start.getTime() - 1000 * 3600 * 24 * 15);
  dateRange.value = [formatDate(start), formatDate(end)];
  let facval = JSON.parse(localStorage.getItem("facList")).map(item => item.code);
  console.log(facval);
  spcIndicatorquerySpcIndicatorTree({
    classCode: "WATER",
    configType: "USER"
  }).then(res => {
    spcList.value = res;
    spcList.value = spcList.value.filter(item => {
      return facval.some(filterItem => filterItem === item.facCode);
    });
    console.log(spcList.value);
  });
};
const defaultProps = {
  children: "children",
  label: "label",
  value: "jobId"
};
const tableData = [
  {
    name: "PRE",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    name: "MAK UP",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    name: "POLI SHER",
    address: "No. 189, Grove St, Los Angeles"
  }
];
const activeWater = ref("PRE");
const activeWater2 = ref("PRE");
const tabPaneList = [
  {
    label: "PRE",
    name: "PRE"
  },
  {
    label: "MAKE UP",
    name: "MAKE UP"
  },
  {
    label: "POLISH",
    name: "POLISH"
  }
];
const handleQuery = () => {
  setpkflg("pk");
  setpkflg("close");
};
const resetQuery = () => {
  const end = new Date();
  end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  const start = new Date();
  start.setHours(0, 0, 0, 0);
  start.setTime(start.getTime());
  dateRange.value = [formatDate(start), formatDate(end)];
  setcheckList1();
  setcheckList2();
  setcheckList3();
};
const getList = () => {};
</script>
<style scoped lang="scss">
.water_col {
  height: 100%;
  background: none;
}

.waterdom {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;
}

.first_width {
  width: calc(100% - 16px);
}

.model_chart {
  position: relative;
  width: 100%;
  height: calc(100% - 40px);
  margin-top: 10px;
}

.miantop {
  position: relative;
  width: 100%;
  height: 36px;
  font-size: 16px;
  font-weight: 600;
  line-height: 36px;
  color: #000;
  border: 1px solid #dfdfdf;
  border-bottom: none;
}

.mianscrollbar {
  height: 200px;
  padding: 16px;
  border: 1px solid #dfdfdf;
}

.miantoptitle {
  display: inline-block;
  width: 86px;
  height: 100%;
  text-align: center;
  background: #e9f8f9;
  border-right: 1px solid #dfdfdf;
}

.maincenter {
  position: relative;
  // border-top: 1px solid #dfdfdf;
  // border-bottom: 1px solid #dfdfdf;
  width: 100%;
  height: 100%;

  .btnpos {
    position: absolute;
    top: calc(50% - 16px);
    left: calc(50% - 25px);
  }
}

.bg2 {
  background: #e7eefb;
}

.detailmain2 {
  position: absolute;
  top: 0;
  left: 16px;
  height: 58px;
}

.chartsdom {
  width: 100%;
  height: 446px;
  margin-top: 60px;
  background: white;
}

.markdom {
  z-index: 55;
  width: 100%;
}

:deep(.px-table__header) {
  thead {
    tr {
      background-color: #e7eefb !important;

      th {
        font-size: 14px;
        font-weight: bold;
        color: #000;
        background-color: #e7eefb !important;
      }
    }
  }
}

.toptabs {
  position: absolute;
  top: -7px;
  left: calc(50% - 55px);
  z-index: 10;
  height: 43px;
}
</style>
